<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单fans</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
</head>
<style>
    .content {
        padding: 15px;
    }

    .fans_info {
        height: 75px;
        padding: 0 15px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .fans_info .info_lef {
        display: flex;
        align-items: center;
    }

    .fans_info .info_lef img {
        flex: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .fans_info .info_lef .info_cen {
        font-size: 11px;
        color: #999;
        line-height: 11px;
    }

    .fans_info .info_lef .info_cen .cen_top {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #333;
        line-height: 16px;
        margin-bottom: 10px;
    }

    .fans_info .info_lef .info_cen .cen_top .t_right {
        display: inline-block;
        width: 45px;
        height: 15px;
        background-image: linear-gradient(45deg, 
		#ff3a24 0%, 
		#ff5340 100%);
        border-radius: 5px;
        font-size: 11px;
        color: #ffffff;
        margin-left: 10px;
        text-align: center;
        line-height: 15px;
    }

    .fans_info .info_rig img {
        width: 5.5px;
        height: 10px;
        margin-left: 10px;
    }

    .fans_info .info_rig {
        font-size: 12px;
        color: #333;
        display: flex;
        align-items: center;
    }

    .fans_info .info_lef .info_cen .cen_top .t_left {
        width: 5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

<body>
    <div class="content">
    </div>
</body>

<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
    let next_p = 1;
    apiready = function () {
        addEvent();
        fans_list();
    };

    function addEvent() {
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 1000,
            },
        }, function (ret, err) {
            fans_list();
            api.removeEventListener({
                name: 'scrolltobottom'
            });
            setTimeout(function () {
                addEvent()
            }, 1000)
        });
    }

    function ss_fans_list() {
        next_p = 1;
        $api.html($api.dom(".content"), ``);
        fans_list(api.setGlobalData({
            key: 'fans_search',
        }))
    }

    function fans_list(string) {
        $api.ajax({
            url: 'api/member/fans_list',
            method: 'get',
            data: {
                values: {
                    next_p: next_p,
                    nick_name: string,
                }
            },
            page: next_p,
            timeOutHtml: $api.dom('.content ')
        }, function (ret) {
            next_p = ret.data.next_p;
            ret.data.list.forEach(item => {
                let html = `<div class="fans_info">
			<div class="info_lef">
				<img src="`+ item.avatar_url + `" alt="">
				<div class="info_cen">
					<div class="cen_top">
						<span class="t_left">`+ item.nick_name + `</span>
					</div>
					<div class="cen_bot">
						<span>`+ getLocalTime(item.register_time) + `</span>
					</div>
				</div>
			</div>
		</div>`
                $api.append($api.dom(".content"), html)
            });
        });
    }


</script>

</html>